<template>
  <n-drawer class="briefs-info" v-model:show="active" width="63%">
    <n-drawer-content body-style="--n-body-padding:0" closable>
      <template #header>
        <div class="my-title--primary">领取内裤(详情)</div>
      </template>
      <div class="i-card">
        <div class="i-card_top">
          <div class="i-card_top-icon"></div>
          <div class="i-card_top-name">
            <span>西门起</span>
            <span>13343452345</span>
          </div>
        </div>
        <div class="i-card_bottom">
          <span>订单编号: dasdasdad213123123</span>
          <span>订单状态：正常</span>
        </div>
      </div>
      <div class="i-action">
        <div class="i-action_left">
          <div class="i-action_left-receive">
            领取次数：
            <span>6</span>
          </div>
          <div class="i-action_left-line"></div>
          <div class="i-action_left-remain">
            剩余次数：
            <span>0</span>
          </div>
        </div>
        <div class="i-action_right">
          <div class="i-action_right-btn i-action_right-btn--return">退单</div>
          <div class="i-action_right-btn i-action_right-btn--print">打印</div>
        </div>
      </div>
      <div class="i-log">
        <div class="i-log_row i-log_header ">
          <div class="i-log_row-col">领取次数</div>
          <div class="i-log_row-col">领取时间</div>
          <div class="i-log_row-col">操作人</div>
          <div class="i-log_row-col">领取产品</div>
        </div>
        <div class="i-log_row">
          <div class="i-log_row-col">第一次领取</div>
          <div class="i-log_row-col">2022-10-11 08:30:20</div>
          <div class="i-log_row-col">李嘉贤</div>
          <div class="i-log_row-col">K007-活动内裤</div>
        </div>
      </div>
      <template #footer>
        <div class="i-footer">
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
  import { toRefs } from "vue";
  const props = defineProps({
    active: {
      type: Boolean,
      default: false
    }
  });
  let {
    active
  } = toRefs(props);
</script>

<style lang="less" scoped>
  .briefs-info {

    .i-card {
      width: 1110px;
      height: 110px;
      padding: 20px;
      margin: 20px 0 20px 20px;
      background: #d6dae7;

      &_top {
        display: flex;
        align-items: center;

        &-icon {
          width: 48px;
          height: 48px;
          margin-right: 10px;
          background: #FFF;
        }

        &-name {
          font-size: 30px;
          font-weight: bold;
          color: #2E323D;

          >span {
            &:nth-child(1) {
              margin-right: 10px;
            }
          }
        }
      }

      &_bottom {
        margin: 20px 0 0 58px;
        font-size: 24px;
        font-weight: 500;
        color: #4A5060;

        >span {
          &:nth-child(1) {
            margin-right: 220px;
          }
        }
      }
    }

    .i-action {
      display: flex;
      justify-content: space-between;
      margin: 20px 40px 20px 20px;

      &_left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 404px;
        height: 60px;
        font-size: 24px;
        font-weight: 500;
        color: #666;
        background: #F7F7F7;
        border-radius: 5px;

        &-receive {
          width: 200px;
          text-align: center;

          >span {
            color: #2C8CF0;
          }
        }

        &-line {
          width: 1px;
          height: 30px;
          background: #D8D8D8;
        }

        &-remain {
          width: 200px;
          text-align: center;

          >span {
            color: #ED3709;
          }
        }
      }

      &_right {
        display: flex;
        align-items: center;
        &-btn {
          width: 128px;
          height: 44px;
          font-size: 24px;
          font-weight: 500;
          text-align: center;
          line-height: 44px;
          border-radius: 5px;

          &--return  {
            margin-right: 20px;
            color: #EC3F14;
            background: #FFEFEB;
            border: 1px solid #EC3F14;
          }
          &--print {
            color: #2C8CF0;
            background: #EBF4FF;
            border: 1px solid #2C8CF0;
          }
        }
      }
    }
    .i-log {
      margin-left: 20px;
      &_row {
        display: flex;
        align-items: center;
        width: 1110px;
        height: 74px;
        padding:0 20px;
        border: 1px solid #e0e0e0;
        &-col {
          flex: 1;
        }
      }
      &_header {
        font-size: 24px;
        font-weight: 500;
        color: #4A5060;
        background: #F7F7F7;
      }
    }

    .i-content {
      margin-left: 20px;
    }

    .i-footer {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>